<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css工具提示 tooltips</title>   
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="description" content="纯css工具提示 tooltips"> 
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">    

        <meta name="apple-mobile-web-app-capable" content="yes"/>
          <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css
">
    <link rel="stylesheet" type="text/css" href="../dist/tooltips.min.css">


</head>
<style type="text/css">
body{overflow-x:hidden;}
    @media screen and (max-width: 400px) {
        .tooltips-header h1 {
            font-size: 55px;
        }
   }
   .tooltips-header h1{text-shadow: 0 6px 1px rgba(0, 0, 0, 0.2);}
</style>
<body>

<div class="tooltips-header">
      <div class="container">
      <a href="https://github.com/xurui3762791/tooltips" target="_blank" class="github-corner">
<svg width="150" height="150" viewBox="0 0 250 250" style="fill:#62A8E6; color:#000;position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
</a>
            <h1>tooltips.css</h1>
            <p>纯css打造的工具提示</p>
 <a target="_blank" href="https://github.com/xurui3762791/tooltips" data-tooltips="Github Project" class="tooltips-top btn btn-lg btn-primary">Github Project</a>
 <a target="_blank" href="https://github.com/xurui3762791/tooltips" data-tooltips="Download CSS" class="tooltips-top btn btn-lg btn-link hidden-xs">Download CSS</a>



      </div>
</div>
<div class="container">


        <h4>Example</h4>
    <div class="tooltips_cell col-md-4 tooltips_color_1">
        <a href="javascript:void(0)" data-tooltips="bottom-right" class="tooltips-bottom-right">bottom-right</a>
    </div>
    <div class="tooltips_cell col-md-4 tooltips_color_2">
        <a href="javascript:void(0)" data-tooltips="bottom" class="tooltips-bottom">bottom</a>
    </div>
    <div class="tooltips_cell col-md-4 tooltips_color_3">
        <a href="javascript:void(0)" data-tooltips="bottom-left" class="tooltips-bottom-left">bottom-left</a>
    </div>
    <div class="tooltips_cell col-md-4 tooltips_color_4">
        <a href="javascript:void(0)" data-tooltips="right" class="tooltips-right">right</a>
    </div>
    <div class="tooltips_cell col-md-4 tooltips_color_5"><a>.</a></div>
    <div class="tooltips_cell col-md-4 tooltips_color_6">
        <a href="javascript:void(0)" data-tooltips="left" class="tooltips-left">left</a>
    </div>
    <div class="tooltips_cell col-md-4 tooltips_color_7">
        <a href="javascript:void(0)" data-tooltips="top-right" class="tooltips-top-right">top-right</a>
    </div>
    <div class="tooltips_cell col-md-4 tooltips_color_8">
        <a href="javascript:void(0)" data-tooltips="top" class="tooltips-top">top</a>
    </div>
    <div class="tooltips_cell col-md-4 tooltips_color_9">
        <a href="javascript:void(0)" data-tooltips="top-left" class="tooltips-top-left">top-left</a>
    </div>
<div class="clearfix"></div>


        <h4>Color tools</h4>

    <div class="tooltips_cell col-md-3 tooltips_color_13">
        <a class="tooltips-top tooltips-error"  data-tooltips="error tooltips">error</a>   
    </div>
    <div class="tooltips_cell col-md-3 tooltips_color_14">
        <a class="tooltips-top tooltips-warning"  data-tooltips="warning tooltips">warning</a>   
    </div>
    <div class="tooltips_cell col-md-3 tooltips_color_15">
        <a class="tooltips-top tooltips-info"  data-tooltips="info tooltips">info</a>   
    </div>
    <div class="tooltips_cell col-md-3 tooltips_color_16">
        <a class="tooltips-top tooltips-success"  data-tooltips="success tooltips">success</a>   
    </div>


<div class="clearfix"></div>
        <h4>Size tools</h4>
    <div class="tooltips_cell col-md-4 tooltips_color_10">
        <a class="tooltips-top  tooltips-small"  data-tooltips="small工具提示">Small</a>    
    </div>
    <div class="tooltips_cell col-md-4 tooltips_color_11">
        <a class="tooltips-top  tooltips-medium"  data-tooltips="medium工具提示!!!!!!!">Medium</a>    
    </div>
    <div class="tooltips_cell col-md-4 tooltips_color_12">
        <a class="tooltips-top  tooltips-large"  data-tooltips="large工具提示!!!!!!!">Large</a>    
    </div>


<div class="clearfix"></div>
    <h4>Alternative</h4>

    <div class="tooltips_cell col-md-12">  
    <a class="tooltips-bottom  tooltips-always" data-tooltips="...还可以这样提示">还可以这样提示</a> 
    </div>

<div class="clearfix"></div>





</div>

<div class="container" style="padding-bottom: 100px;">
        <h4>Using</h4>
        <p class="titie">在HTML上添加tooltips.min.css</p>
        <div class="col-md-12">
<pre><code class="text-primary">&lt;link rel=&quot;<span class="text-danger">stylesheet</span>&quot; href=&quot;<span class="text-danger">tooltips.min.css</span>&quot;&gt;</code></pre>

        </div>
        <p class="titie">在 stylus 中使用</p>
        <div class="col-md-12">
        <pre><code class="text-primary">@import &quot;node_modules/tooltips&quot;</code></pre>

        </div>
        <p class="titie">给标签添加 data-tooltips 和 class="tooltips-top" 属性</p>
        <div class="col-md-12">
<pre><code class="text-primary">&lt;span data-tooltips=&quot;<span class="text-danger">top</span>&quot; class=&quot;<span class="text-danger">tooltips-top</span>&quot;" &gt;tooltips&lt;/span&gt;</code></pre>
        </div>
</div>
</body>

</html>


















